<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-size: 18px;
    }

    #app {
      padding: 10px 20px;
    }

    .query {
      margin: 10px 0;
    }

    .box {
      display: flex;
    }

    textarea {
      width: 300px;
      height: 160px;
      font-size: 18px;
      border: 1px solid #dedede;
      outline: none;
      resize: none;
      padding: 10px;
    }

    textarea:hover {
      border: 1px solid #1589f5;
    }

    .transbox {
      width: 300px;
      height: 160px;
      background-color: #f0f0f0;
      padding: 10px;
      border: none;
    }

    .tip-box {
      width: 300px;
      height: 25px;
      line-height: 25px;
      display: flex;
    }

    .tip-box span {
      flex: 1;
      text-align: center;
    }

    .query span {
      font-size: 18px;
    }

    .input-wrap {
      position: relative;
    }

    .input-wrap span {
      position: absolute;
      right: 15px;
      bottom: 15px;
      font-size: 12px;
    }

    .input-wrap i {
      font-size: 20px;
      font-style: normal;
    }

    .query {
      display: inline-block;
      margin: 10px;
    }

    select {
      width: 100px;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 条件选择框 -->
    <div class="query">
      <span>源语言：</span>
      <select v-model="obj.from">
        <option value="en">英语</option>
        <option value="zh">简体中文</option>
        <option value="jp">日语</option>
        <option value="fra">法语</option>
      </select>
    </div>
    <div class="query">
      <span>目标语言：</span>
      <select v-model="obj.to">
        <option value="zh">简体中文</option>
        <option value="en">英语</option>
        <option value="jp">日语</option>
        <option value="fra">法语</option>
      </select>
    </div>

    <!-- 翻译框 -->
    <div class="box">
      <div class="input-wrap">
        <textarea v-model="obj.q"></textarea>
        <span><i>⌨️</i>文档翻译</span>
      </div>
      <div class="output-wrap">
        <div class="transbox">{{ result }}</div>
      </div>
    </div>
  </div>
  <script src="./js/vue-2.7.14.js"></script>
  <script src="./js/axios.js"></script>
  <script>
    // 接口地址：http://www.itcbc.com:3006/api/translate
    // 请求方式：get
    // 请求参数：
    // （1）q：   需要被翻译的文本（必传）
    // （2）from：源语言（可选），默认-英语
    // （3）to：  需要被翻译成的语言（可选）默认值-中文
    // -----------------------------------------------

    const app = new Vue({
      el: '#app',
      data: {
        obj: {
          q: 'goods',
          from: 'en',
          to: 'zh'
        },
        result: '',
        timer: null
      },
      watch: {
        obj: {
          handler(val) {
            // console.log(val)
            // 输入框为空时，不请求
            if (val.q === '') {
              this.result = ''
              return
            }

            // 防抖
            clearTimeout(this.timer)
            this.timer = setTimeout(async () => {
              const { data: res } = await axios({
                url: 'http://www.itcbc.com:3006/api/translate',
                params: val
              })
              console.log(res)
              this.result = res.trans_result[0]
            }, 1000)
          },
          deep: true,
          immediate: true
        }
      }
    })
  </script>
</body>

</html>